<template>
  <div class="history-container">
    <h1>历史选课记录</h1>

    <table v-if="paginatedCourses.length > 0">
      <thead>
      <tr>
        <th>课程编号</th>
        <th>课程名称</th>
        <th>上课时间</th>
        <th>上课地点</th>
        <th>教师姓名</th>
        <th>状态</th>
        <th>时间</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(course, index) in paginatedCourses" :key="index">
        <td>{{ course.cno }}</td>
        <td>{{ course.cname }}</td>
        <td>{{ course.time }}</td>
        <td>{{ course.address }}</td>
        <td>{{ course.tname }}</td>
        <td>{{ course.type }}</td>
        <td>{{ course.htime }}</td>
      </tr>
      </tbody>
    </table>
    <p v-else>暂无历史选课记录。</p>

    <div class="pagination" v-if="courseHistory.length > 0">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import {computed, onMounted, ref} from 'vue';
import {useRoute} from "vue-router";

const route=useRoute()
const id=route.query.id
onMounted(()=>{
  getData()
})
const getData = async () => {
  try {
    const response = await axios.get('http://localhost:8080/getCourseHistory', {
      params: {
        id: id
      }
    });
    courseHistory.value = response.data.map(course => ({
      ...course, // 复制原始属性
      htime: formatTimestamp(course.htime) // 格式化 htime 属性
    }));

    console.log(courseHistory.value);
    totalPages.value= Math.ceil(courseHistory.value.length /itemsPerPage.value);
  } catch (error) {
    console.error(error);
  }
};
const courseHistory = ref([]);
const currentPage = ref(1);
const itemsPerPage = ref(5);
const totalPages = ref(Math.ceil(courseHistory.value.length /itemsPerPage.value));
const paginatedCourses = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage.value;
  const endIndex = startIndex + itemsPerPage.value;
  return courseHistory.value.slice(startIndex, endIndex);
});
  const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};
function formatTimestamp(timestamp) {
  if (!timestamp) return ''; // 或者返回其他默认值

  const date = new Date(timestamp);
  if (isNaN(date.getTime())) return ''; // 如果解析失败，返回空字符串或其他默认值

  // 获取年份、月份、日、小时、分钟和秒
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  // 格式化日期时间字符串
  return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
}
</script>

<style scoped>
.history-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
}

table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {
  background-color: #f1f1f1;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.pagination button {
  margin: 0 5px;
}
</style>